<template>
  <div>
    <div class="top-bar_2">
      <van-nav-bar
        left-text="关闭"
        title="发出的红包"
        :border="false"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <van-icon name="ellipsis" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div class="Arcbox"></div>
      <div class="Headpicture">
        <img :src="iconUrl + $store.state.redPackageInfo[0].userImage" alt="" />
      </div>
      <div class="content_info">
        <div class="title_name">
          {{ $store.state.redPackageInfo[0].user }}发出的红包
        </div>
        <div class="titel_msg">
          {{ Decode($store.state.redPackageInfo[0].msg) }}
        </div>
      </div>
      <div class="Detailsbox">
        <div class="price_titel van-hairline--bottom">
          红包金额{{ $store.state.redPackageInfo[0].red_amount }}.00元
        </div>
        <div class="Details_content">
          <div class="Details_content_l">
            <img :src="iconUrl + pic" alt="" />
            <div class="Details_content_l_info">
              <p class="usename tiel_1">
                {{ $store.state.chatName }}
              </p>
              <p class="titel_2">
                {{ changetime($store.state.redPackageInfo[0].dateTime) }}
              </p>
            </div>
          </div>
          <div class="Details_content_r">
            <p class="pircer tiel_1">
              {{ $store.state.redPackageInfo[0].red_amount }}.00元
            </p>
            <p class="titel_2">
              {{
                $store.state.redPackageInfo[0].isOpen == "false"
                  ? "未提现"
                  : "已提现"
              }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let Base64 = require("js-base64").Base64; //用于字符串编码 解码 用来存储表情
import myfun from "../../utils/timeDate.js";

export default {
  data() {
    return {
      pic: "",
    };
  },
  created() {
    this.getuser();
  },
  computed: {
    receiveid() {
      return this.$store.state.friID; //获取对方的id
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    Decode(t) {
      return Base64.decode(t);
    },
    changetime(t) {
      return myfun.dateTime1(t);
    },
    async getuser() {
      try {
        const { data: res } = await this.$http.get("queryUserinfo", {
          params: { id: this.receiveid },
        });
        this.pic = res.data[0].userImg;
      } catch (error) {}
    },
  },
};
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #ef4c2d;
}
.main {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: #eeeeee;
  /* background: red; */
  top: 0;
  .Arcbox {
    width: 100vw;
    height: 9.5vh;
    position: absolute;
    top: 45px;
    background-color: #ef4c2d;
    border-radius: 0 0 80% 80%;
    left: 0;
    right: 0;
  }
  .Headpicture {
    width: 50px;
    height: 50px;
    position: absolute;
    border: 2px solid white;
    border-radius: 50%;
    left: 50%;
    top: 8%;
    transform: translate(-50%, 50%);
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .content_info {
    position: absolute;
    left: 50%;
    top: 25vh;
    transform: translate(-50%, -50%);
    div {
      margin: 8px;
    }
    .title_name {
      text-align: center;
      white-space: nowrap;

      color: #3d4144;
      font-size: 18px;
    }
    .titel_msg {
      text-align: center;
      color: #9999;
      font-size: 16px;
    }
    .title_price {
      font-size: 30px;
      text-align: center;
      color: #ef4c2d;
      span {
        font-size: 16px;
        margin-left: 4px;
      }
    }
    .titel_tip {
      text-align: center;
      white-space: nowrap;
      color: #9999;
    }
  }
  .Detailsbox {
    width: 88.4vw;
    height: 13.7vh;
    background-color: #ffffff;
    position: absolute;
    top: 31vh;
    left: 3vw;
    border-radius: 10px;
    padding: 10px;
    .price_titel {
      padding-bottom: 5px;
      color: #999999;
    }
    .Details_content {
      display: flex;
      /* align-items: center; */
      justify-content: space-between;
      .Details_content_l {
        display: flex;
        /* flex-direction: row; */
        align-items: center;
        img {
          width: 50px;
          height: 50px;
          margin-top: 10px;
          border-radius: 50%;
        }
        .Details_content_l_info {
          margin-left: 10px;
          .usename {
            margin: 10px 0;
          }
        }
      }
      .Details_content_r {
        .pircer {
          margin: 10px 0;
          text-align: center;
        }
      }
      .tiel_1 {
        color: #46474b;
        font-size: 15px;
      }
      .titel_2 {
        color: #9c9c9c;
      }
    }
  }
}
</style>